<template>
  <div>
    <Header/>
  </div>
  <div>
    <h1>欢迎登录资料管理系统</h1>
  </div>
  <!--登录栏-->
  <!--  <template>-->
      <el-form :model="form" style="width:40%;margin: 50px auto">
        <el-form-item label="用户名：">
          <el-input
              v-model="form.name"
              placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="密&nbsp&nbsp&nbsp&nbsp码：">
          <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
              show-password
          />

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" style="margin-left: 40%"
          >登录
          </el-button
          >
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    <!--</template>-->
    <!--    <el-form :model="form" style="width:400px;margin: 50px auto">-->
    <!--      <el-form-item label="用户名：">-->
    <!--        <el-input v-model="form.name"/>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;码：">-->
    <!--        <el-input v-model="form.password"/>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-button type="primary" @click="login">登录</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->

</template>

<script>
import Header from "@/components/Header";
import request from "@/utils/request";

export default {
  name: "LoginView",
  components: {Header},
  data() {
    return {
      form: {},
      componyName: '',
      componyId: '',
      ruleForm: {}
    }
  },
  methods: {
    resetMessage() {
      this.$message({
        type: null,
        message: null
      })
    },
    resetForm() {
      this.form = {}
    },
    login() {

      if (this.form.name && this.form.password) {
        request.post('/api/login', this.form).then(res => {
          if (res.code === 200) {
            //提示一个成功框
            this.$message({
              type: "success",
              message: res.extend.message
            })
            this.componyName = res.extend.componyName
            this.componyId = res.extend.componyId
            this.skip('/fileManagement')
          } else {
            //提示一个失败框
            // this.$message =
            this.$message({
              type: "error",
              message: res.extend.message
            })
          }
        })
      }
      this.resetMessage()
    },
    skip: function (url) {
      this.$router.push({
        path: url,
        query: {
          componyName: this.componyName,
          componyId: this.componyId
        }
      });
    },
    // 点击回车键登录
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode == 13 || e.keyCode == 100) {
        this.login(); // 定义的登录方法
      }
    }
  },
  mounted() {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },
}
</script>

<style scoped>

</style>